<template>
	<view class="page_content">
		<u-navbar title="购物车" :placeholder="!isLogin" :autoBack="false" :bgColor="theme_color" :titleStyle="{color:'#ffffff'}"
			:leftIconColor="theme_color"></u-navbar>
    <template v-if="isLogin">
      <view class="play-s-box" :style="'margin-top:' + navH + 'px;'">
        <!-- 	<view class="play-s">
            <u-icon name="list" v-if="play_change_index == 0" size="30" @click="playChange()"></u-icon>
            <u-icon name="grid" v-if="play_change_index == 1" size="30" @click="playChange()"></u-icon>
          </view> -->
      </view>
      <!-- 购物车有商品的情况  -->
      <view class="goods">
        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
                       v-if="play_change_index == 0">
          <view v-for="(value,i) in shopping_list" :key="i">
            <view class="item-box">
              <view class="top-title">
                <image :src="img_url+'/statics/yilangmp/no_goods_select.png'" mode="" v-if="!value.isShow"
                       @click="storeAll(value.supplier_id,i)"></image>
                <image :src="img_url+'/statics/yilangmp/goods_select.png'" mode="" v-if="value.isShow"
                       @click="storeAllCancel(i)"></image>
                <view style="margin-left: 10px;">
                  {{value.supplier_name}}
                </view>
              </view>
              <view v-for="(item,j) in value.goods_info" :key="j" class="cart-box">
                <view class="content">
                  <view style="align-self:center;padding-right: 20px;">
                    <view v-if="!item.isShow" @click="store(item.supplier_id,i,j)">
                      <image :src="img_url+'/statics/yilangmp/no_goods_select.png' " mode="scaleToFill"
                             style="width: 20px;height: 20px;"></image>
                    </view>
                    <view v-if="item.isShow" @click="storeCancel(i,j)">
                      <image :src="img_url+'/statics/yilangmp/goods_select.png' " mode="scaleToFill"
                             style="width: 20px;height: 20px;"></image>
                    </view>
                  </view>
                  <view class="left flex">
                    <image :src="item.goods_thumb" @click="goodsDetails(item.goods_id)" mode="">
                    </image>
                  </view>
                  <view class="right" @click="goodsDetails(item.goods_id)">
                    <view class="top">
                      {{item.goods_name}}
                    </view>
                    <view class="middle">
                      <text>规格 : </text>
                      <text v-if="item.goods_attr!=null">{{item.goods_attr}}</text>
                    </view>
                    <view class="price fs-16" v-if="item.shop_price == '面议'">价格{{item.shop_price}}</view>
                    <view class="price fs-16" v-else-if="item.shop_price == 0">面议</view>
                    <view class="price fs-16" v-else>￥{{item.shop_price}}</view>
                  </view>
                </view>
                <view style="width: 100%;position: relative;height: 30px;margin-top: 10rpx;">
                  <view class="number acea-row">
                    <u-number-box :index="item.id" v-model="item.goods_number" :positive-integer="true"
                                  :input-height="46" :input-width="50" :min="1" @minus="minusNum(i,j)" :disabledInput="true"
                                  @plus="plusNum(i,j)"></u-number-box>
                  </view>
                </view>

                <view class="delect color999" v-bind:class="{'delect2': j+1 < value.goods_info.length}"
                      @click="number_i = i , number_j = j, deleteOrder()">
                  删除
                </view>
              </view>
            </view>
          </view>
        </mescroll-body>

        <view class="table-box" v-if="play_change_index == 1">
          <!-- 表格标题 -->
          <view class="table">
            <view class="name  txt-title">
              商品名称
            </view>
            <view class="price txt-title  price2 ">
              规格名
            </view>
            <view class="price txt-title  price2 ">
              售价
            </view>
            <view class="price txt-title">
              数量
            </view>
          </view>
          <!-- 表格内容 -->
          <view v-for="(value,i) in shopping_list" :key="i">
            <view v-for="(item,j) in value.goods_info" :key="j">
              <view class="table" @click="goodsDetails(item.goods_id)">
                <view class="name  txt-1">
                  <text>
                    {{item.goods_name}}
                  </text>
                </view>
                <view class="name  price  txt-1  price2 ">
                  {{item.goods_attr==null?'':item.goods_attr}}
                </view>
                <view class="price txt-1 price2 ">
                  {{item.shop_price==null?0:item.shop_price}}
                </view>
                <view class="price txt-1 price2  ">
                  {{item.goods_number}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
		<view class="bn-box acea-row row-between-wrapper" v-if="play_change_index == 0">
			<view></view>
			<view class="right acea-row row-middle">
				<text style="padding: 0 10rpx;color: rgba(233,51,35,1);">
					￥{{goods_total}}
				</text>
				<button class='placeOrder bg-color' @click="settlement()">结算</button>
			</view>
		</view>
    </template>
    <template v-else>
      <view style="padding-top: 100px;display: flex;flex-direction: column;align-items: center">
      <u-text color="#666" size="20px" align="center" text="未登录，请登录后查看"></u-text>
      <view style="margin-top: 20px;width: 100px">
        <u-button type="error" plain text="去登录" @click="toLogin" shape="circle"></u-button>
      </view>
      </view>
    </template>
	</view>
</template>
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		BASE_URL
	} from '@/config/app'
	import {
		cart_list,
		cart_del,
		cart_edit
	} from "@/api/store.js";
	import {
		mapGetters
	} from "vuex";
  import UEmpty from "../../uni_modules/uview-ui/components/u-empty/u-empty.vue";
  import UButton from "../../uni_modules/uview-ui/components/u-button/u-button.vue";
	export default {
    components: {UButton, UEmpty},
		mixins: [MescrollMixin],
		data() {
			return {
				navH: '',
				theme_color: getApp().globalData.theme_color,

				play_change_index: 0,
				shopping_list: [],

				number_input: 0,
				number_i: 0, //外循环
				number_j: 0, //内循环
				select_i: 0, //外循环
				select_j: 0, //内循环

				goods_total: 0.00,
				total_price: 0, //购物车总价
				rec_id: '',
				img_url: BASE_URL,
				supplier_id: getApp().globalData.supplier_id,
				supplier_id_2: -1, //用来判断是否是同一个店铺的商品
				select_rec_id: ''
			}
		},
		computed: mapGetters(["isLogin", "app_token"]),
		onLoad() {
			this.navH = getApp().globalData.navHeight / 2;
		},
		onShow() {
      if(this.isLogin){
        this.mescroll.resetUpScroll()
      }
		},
		methods: {
      toLogin(){
        uni.navigateTo({
          url:'/pages/users/login/index'
        })
      },
			getTotalPrice() {
				var that = this;
				cart_list({
					app_token: that.app_token,
					supplier_id: getApp().globalData.supplier_id,
					rec_id: that.select_rec_id,
					market_type: '',
					page: ''
				}).then((res) => {
					if (res.status == 1) {
						that.goods_total = parseFloat(res.data.total_price).toFixed(2);
					} else {
						that.$util.Tips({
							title: res.msg
						})
					}
				})
			},
			upCallback(page) {
        if(!this.isLogin)return
				var _this = this;
				cart_list({
					app_token: _this.app_token,
					supplier_id: getApp().globalData.supplier_id,
					page: page.num,
					market_type: ''
				}).then((res) => {
					this.mescroll.endSuccess(res.data.cart_list.length);

					if (page.num == 1) this.shopping_list = []; //如果是第一页需手动制空列表
					//设置列表数据
					this.shopping_list = this.shopping_list.concat(res.data.cart_list); //追加新数据

					_this.total_price = res.data.total_price;

					for (let value of this.shopping_list) {
						const obj = {
							supplier_name: value.supplier_name,
							goods_total: value.goods_total,
							supplier_id: value.supplier_id,
							goods_info: [],
							isShow: false,
						}
						for (let value_2 of value.goods_info) {
							const obj_2 = {
								rec_id: value_2.rec_id,
								goods_id: value_2.goods_id,
								product_id: value_2.product_id,
								goods_attr_id: value_2.goods_attr_id,
								goods_attr: value_2.goods_attr,
								goods_number: value_2.goods_number,
								shop_price: value_2.shop_price,
								market_price: value_2.market_price,
								goods_thumb: value_2.goods_thumb,
								unit: value_2.unit,
								goods_name: value_2.goods_name,
								supplier_name: value_2.supplier_name,
								supplier_id: value_2.supplier_id,
								isShow: false
							}
							obj.goods_info.push(obj_2)
						}
					}
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			playChange: function() {
				if (this.play_change_index == 0) {
					this.play_change_index = 1;
				} else if (this.play_change_index == 1) {
					this.play_change_index = 0;
				}
			},
			// 查看详情
			goodsDetails: function(goods_id) {
				uni.navigateTo({
					url: '/pages/goods/detail/index?goods_id=' + goods_id
				})
			},

			// 去结算
			settlement: function() {
				var rec_id = '';
				var list = [];
				var check = false;
				var supplier_id = 0;
				for (let value of this.shopping_list) {
					for (let value_2 of value.goods_info) {
						if (value_2.shop_price == 0 && value_2.isShow == true) {
							this.$util.Tips({
								title: '有商品价格为面议,请联系客服'
							})
							return;
						} else if (value_2.isShow == true && value_2.shop_price != 0) {
							supplier_id = value_2.supplier_id
							check = true;
							list.push(value_2.rec_id);
						}
					}
				}
				if (check && list.length > 0) {
					rec_id = list.toString();
					uni.navigateTo({
						url: '/pages/order/order_cart/cart/index?rec_id=' + rec_id + '&supplier_id=' +
							supplier_id
					})
				} else {
					uni.showToast({
            icon:'none',
						title: '请先选择商品',
						duration: 2000
					})
				}
			},

			// 店铺全选
			storeAll: function(e, index) {
				var supplier_id = e;
				// 判断是否已经选择了另一个店铺的商品
				if (this.supplier_id_2 == -1) {
					this.select_i = index;
					this.supplier_id_2 = e;
					this.goods_total = 0.00;
					this.shopping_list[this.select_i].isShow = true;
					for (let value of this.shopping_list[this.select_i].goods_info) {
						value.isShow = true;
					}
				} else {
					if (parseInt(this.supplier_id_2) == parseInt(supplier_id)) {
						this.select_i = index;
						this.shopping_list[this.select_i].isShow = true;
						this.goods_total = 0.00;
						for (let value of this.shopping_list[this.select_i].goods_info) {
							value.isShow = true;
						}
					} else {
						this.$util.Tips({
							title: '只能选择同一家店铺的商品结算',
						})
					}
				}

				let tempArr = [];
				this.select_rec_id = '';
				for (let value of this.shopping_list[this.select_i].goods_info) {
					tempArr.push(value.rec_id)
				}
				this.select_rec_id = tempArr.toString();
				this.getTotalPrice()
			},

			// 取消店铺全选
			storeAllCancel: function(index) {
				this.select_i = index;
				this.supplier_id_2 = -1;
				this.shopping_list[this.select_i].isShow = false;
				for (let value of this.shopping_list[this.select_i].goods_info) {
					value.isShow = false;
				}
				this.select_rec_id = '';
				this.goods_total = 0.00;
			},

			// 选择某个商品
			store: function(e, i, j) {
				var supplier_id = e;
				if (this.supplier_id_2 == -1) {
					this.select_i = i;
					this.select_j = j;
					this.supplier_id_2 = e;
					this.shopping_list[this.select_i].goods_info[this.select_j].isShow = true;

					this.select_rec_id = '';

					this.select_rec_id = this.shopping_list[this.select_i].goods_info[this.select_j].rec_id;

					this.getTotalPrice()

				} else {
					if (parseInt(this.supplier_id_2) == parseInt(supplier_id)) {
						this.select_i = i;
						this.select_j = j;
						this.shopping_list[this.select_i].goods_info[this.select_j].isShow = true;

						this.select_rec_id = '';

						let tempArr = [];

						for (var i = 0; i < this.shopping_list[this.select_i].goods_info.length; i++) {
							if (this.shopping_list[this.select_i].goods_info[i].isShow) {
								tempArr.push(this.shopping_list[this.select_i].goods_info[i].rec_id)
							}
						}

						this.select_rec_id = tempArr.toString();

						this.getTotalPrice()

					} else {
						this.$util.Tips({
							title: '只能选择同一家店铺的商品结算',
						})
					}
				}
			},

			// 取消选择某个商品
			storeCancel: function(i, j) {
				this.select_i = i;
				this.select_j = j;
				this.shopping_list[this.select_i].goods_info[this.select_j].isShow = false;
				this.shopping_list[this.select_i].isShow = false;

				var count = 0;
				for (let value of this.shopping_list[this.select_i].goods_info) {
					if (value.isShow == false) {
						count++;
					}
				}
				if (count == this.shopping_list[this.select_i].goods_info.length) {
					this.supplier_id_2 = -1;
				}


				this.select_rec_id = '';

				let tempArr = [];

				for (var i = 0; i < this.shopping_list[this.select_i].goods_info.length; i++) {
					if (this.shopping_list[this.select_i].goods_info[i].isShow) {
						tempArr.push(this.shopping_list[this.select_i].goods_info[i].rec_id)
					}
				}

				if(tempArr.length > 0){
					this.select_rec_id = tempArr.toString();
					this.getTotalPrice()
				}else{
					this.select_rec_id = '';
					this.goods_total = 0.00;
				}

			},

			plusNum(i, j) {
				var _this = this;
				_this.number_i = i;
				_this.number_j = j;
				_this.number_input = _this.shopping_list[_this.number_i].goods_info[_this.number_j].goods_number + 1;
				_this.shopping_list[_this.number_i].goods_info[_this.number_j].goods_number = _this.number_input;

				var rec_id = _this.shopping_list[_this.number_i].goods_info[_this.number_j].rec_id;

				cart_edit({
					app_token: _this.app_token,
					rec_id: rec_id,
					goods_number: _this.number_input
				}).then(res => {
					if (_this.shopping_list[_this.number_i].goods_info[_this.number_j].isShow) {
						let tempArr = [];
						this.select_rec_id = '';
						for (var i = 0; i < this.shopping_list[this.number_i].goods_info.length; i++) {
							if (this.shopping_list[this.number_i].goods_info[i].isShow) {
								tempArr.push(this.shopping_list[this.number_i].goods_info[i].rec_id)
							}
						}

						this.select_rec_id = tempArr.toString();

						this.getTotalPrice()
					}
				})

			},
			minusNum(i, j) {
				var _this = this;
				this.number_i = i;
				this.number_j = j;
				this.number_input = _this.shopping_list[_this.number_i].goods_info[_this.number_j].goods_number - 1;
				var rec_id = _this.shopping_list[_this.number_i].goods_info[_this.number_j].rec_id;
				_this.shopping_list[_this.number_i].goods_info[_this.number_j].goods_number = _this.number_input;

				cart_edit({
					app_token: _this.app_token,
					rec_id: rec_id,
					goods_number: _this.number_input
				}).then(res => {
					if (_this.shopping_list[_this.number_i].goods_info[_this.number_j].isShow) {
						let tempArr = [];
						this.select_rec_id = '';
						for (var i = 0; i < this.shopping_list[this.number_i].goods_info.length; i++) {
							if (this.shopping_list[this.number_i].goods_info[i].isShow) {
								tempArr.push(this.shopping_list[this.number_i].goods_info[i].rec_id)
							}
						}

						this.select_rec_id = tempArr.toString();

						this.getTotalPrice()
					}
				})

			},


			// 删除购物车
			deleteOrder: function() {
				var _this = this;
				var rec_id = _this.shopping_list[_this.number_i].goods_info[_this.number_j].rec_id;
				uni.showModal({
					content: '确认删除吗？',
					cancelText: '取消',
					cancelColor: '#ABABAB',
					confirmText: '确定',
					confirmColor: '#D56437',
					success: function(res) {
						if (res.confirm) {
							cart_del({
								app_token: _this.app_token,
								rec_id: rec_id
							}).then((res) => {
								var data_string_res = res;
								uni.showToast({
									title: '删除' + data_string_res.msg,
									duration: 1000
								})
								_this.mescroll.resetUpScroll()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page_content {
		width: 100%;
		font-size: 35upx;
		background-color: #ffffff;

		.play-s-box {
			width: 100%;
			display: flex;
			justify-content: flex-end;

			.play-s {
				padding: 0 10px;
			}
		}

		.goods {
			width: 100%;
			font-size: 28upx;
			color: #333333;
			padding-bottom: 350rpx;
			padding-top: 10rpx;

			.item-box {
				border-top: 1px solid #e2e2e2;
				padding-top: 10px;
				padding-bottom: 20px;

				.top-title {
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 30rpx;
					padding-left: 40upx;
					display: flex;
					align-items: center;

					image {
						width: 20px;
						height: 20px;
						object-fit: cover;
					}
				}

				.cart-box {
					display: flex;
					flex-direction: column;

					.content {
						width: 100%;
						padding: 20px 20px 0 20px;
						display: flex;

						.left {
							align-items: center;
							height: 200rpx;
							width: 200rpx;

							image {
								width: 200rpx;
								height: 200rpx;
							}
						}

						.right {
							display: flex;
							flex-direction: column;
							align-self: center;
							padding-left: 20px;

							.top {
								overflow: hidden;
								font-size: 30rpx;
								font-weight: bold;
							}

							.middle {
								margin-top: 10px;
							}

							.price {
								color: orangered;
								margin-top: 10px;
							}
						}
					}
					.number {
						position: absolute;
						right: 20px;
						display: flex;
						height: 30px;
					}
					.delect {
						margin-top: 20px;
						padding-right: 40upx;
						text-align: right;
					}
				}
			}

			.table-box {
				width: 98%;
				margin: auto;
				margin-top: 10rpx;

				.table {
					width: 100%;
					display: flex;
					height: 70rpx;
					font-size: 28rpx;
					margin: 0 auto;
					border: 2rpx solid #EEEEEE;

					.brank {
						flex: 1;
						height: 70rpx;
						line-height: 70rpx;
						border-right: 1rpx solid #EEEEEE;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.name {
						flex: 2;
						height: 70rpx;
						line-height: 70rpx;
						border-left: 1rpx solid #EEEEEE;
						border-right: 1rpx solid #EEEEEE;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.price {
						flex: 1;
						height: 70rpx;
						line-height: 70rpx;
						border-left: 1rpx solid #EEEEEE;
					}

					.price2 {

						border-right: 1rpx solid #EEEEEE;
					}

					.txt-title {
						color: #3C3C3C;
					}

					.txt-1 {
						color: #969696;
						font-size: 24rpx;
					}

					.txt-2 {
						color: #C60B1C;
						font-size: 24rpx;
					}

					.txt-3 {
						flex: 2;
						position: relative;

						.txt-box {
							line-height: 70rpx;
						}
					}
				}
			}
		}
		.bn-box {
			z-index: 999;
			position: fixed;
			bottom: 0rpx;
			width: 100%;
			height: 100rpx;
			background-color: #fafafa;
			padding: 0 15px;
			border-top: 1px solid #eee;

			.right {
				font-size: 15px;

				.placeOrder {
					color: #fff;
					font-size: 30rpx;
					width: 226rpx;
					height: 70rpx;
					border-radius: 50rpx;
					text-align: center;
					line-height: 70rpx;
					margin-left: 22rpx;
				}
			}
		}

	}
</style>
